<template>
  <div id="payment-form py-10">
      <div id="card-element"></div>
      <NButton class="confirmPay" type="info">支付测试</NButton>
  </div>
</template>


<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue';
import { resultPayVo } from "@/api/entity/ResultParam"

import { loadStripe, Stripe} from '@stripe/stripe-js';
import {StripeElements} from "@stripe/stripe-js/dist/stripe-js/elements-group";


const cardElement = ref<HTMLElement | null>(null);
const isProcessing = ref(false);
const errorMessage = ref('');

const props = defineProps({
  payDetail: {
    type: Object
  }
})

onMounted(()=>{
  loadStripePayDetail()
})
const stripeElement = ref<StripeElements | null>()
async function loadStripePayDetail() {
  const stripeDetailPay:resultPayVo = props.payDetail
  const stripe:Stripe = await loadStripe(stripeDetailPay.nonceStr);
  console.log(stripeDetailPay.nonceStr)

  if (stripe) {
    stripeElement.value = stripe.elements({
      clientSecret: stripeDetailPay.paymentSignature,
      locale: 'zh'
    })
    stripeElement.value.create('payment').mount("#card-element")
  }
}

</script>

<style scoped>
.confirmPay {
  width: 100%;
  margin-top: 20px;
}
</style>



